<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			.warp_serach{
				margin:0 15px 15px 15px;
				height: 30px;
				text-align: center;
				border-radius: 5px;
				background: #e6e6e6;
			}
			.item_img{
				width: 60px;
				height:90px;
				margin-right: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" style="background: white;">
			<div style="background: white;height:15px"></div>
			<div class="warp_serach">
				<span class="mui-icon mui-icon-search" style="line-height: 30px;font-size: 16px;color: #AAAAAA;"></span>
				<span style="line-height: 30px;color: #AAAAAA;font-size: 14px;">电影/电视剧/综艺</span>
			</div>
			<div style="background:#E6E6E6;height:0.5px;margin:0 15px"></div>
			<div id="refreshContainer" class="mui-scroll-wrapper" style="top:50px; touch-action: pan-y; ">
				<div class="mui-scroll">
					<ul id="movies" class="mui-table-view">
						<li class="mui-table-view-cell" v-for="item in movies" @tap='open_detail(item)'>
							<img class="item_img mui-pull-left" :src="item.cover"/>
							<div class="mui-ellipsis dark-big">
								{{item.title}}
		
							</div>
							<div class="mui-ellipsis">
								<span class="gray-big">{{item.genres}}</span>
								<span class="orange-big" v-if="item.score>0">{{item.score}}分</span>
								<span class="orange-big" v-else>暂无评分</span>
							</div>
							<div class="mui-ellipsis gray-small">
								导演:{{item.directors}}
							</div>
							<div class="mui-ellipsis gray-small">
								主演:{{item.casts}}
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/vue.min.js" ></script>
		<script src="js/util.js"></script>
		<script type="text/javascript">
			//vue数据绑定
			var movies_data = new Vue({
				el:'#movies',
				data:{
					movies:[]
				}
			});
//			mui('body').on('tap','a',function(){document.location.href=this.href;});
			(function() {
				mui.init({
					swipeBack: true,//启用右滑关闭功能
					pullRefresh: {
					    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					    down: {
					      auto: false,//可选,默认false.首次加载自动上拉刷新一次
					      callback :refreshData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					    },
					    up: {
					      height:50,//可选.默认50.触发上拉加载拖动距离
					      auto:true,//可选,默认false.自动上拉加载一次
					      contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
					      contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
					      callback :loadMoreData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					    }
					}
				});
//				mui('body').on('tap','a',function(){document.location.href=this.href;});
//				window.addEventListener('touchmove', fn(), { passive: false })
				//刷新数据，重新调用接口
				function refreshData() {
					mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
						start:0,
						count:10
					},function(resp) {
						movies_data.movies.splice(0,movies_data.movies.length);
						movies_data.movies = movies_data.movies.concat(convert(resp.subjects));
//						mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
//						mui('#refreshContainer').pullRefresh().refresh(true);
					});
				}
				
				//请求下一页数据
				function loadMoreData(){
					mui.getJSON('https://api.douban.com/v2/movie/in_theaters', {
						start:movies_data.movies.length,
						count:10
					},function(resp) {
						movies_data.movies = movies_data.movies.concat(convert(resp.subjects));
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(movies_data.movies.length > resp.total);
					});
				}
				
				mui.plusReady(function() {
					
					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var 	nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					
						
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.33)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.33) && clientX <= parseInt(pageW * 0.67)) {
							currIndex = 1;
						} else {
							currIndex = 2;
						} 
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}

						if(currIndex !== 3) { 
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						} 
					});
					//预加载电影详情页面
					detailPage = mui.preload({
						id:'movies_detail',
						url:'./html/movies_detail.html'
					});
					
					
				});
			})();
			var detailPage;
			//打开电影详情页面
			function open_detail(item){
				//触发详情页面的movieId事件
				mui.fire(detailPage,'movieId',{
					id:item.id
				});
				//打开
				mui.openWindow({
					id:'movies_detail'
				});
			}
			//搜索框点击事件
			mui('.warp_serach')[0].addEventListener('tap',function(){
				mui.openWindow({
					id:'search',
					url:'./html/search.html'
				})
			})
			//数据转换
			function convert(items){
				var newitem = [];
				items.forEach(function(item){
					//类型
					var genres = item.genres.toString().replace(/,/g,' / ')
					//导演
					var directors = '';
					for(i=0;i<item.directors.length;i++){
						directors+=item.directors[i].name;
						if(i!=item.directors.length-1){
							directors+=' / ';
						}
					}
					//演员
					var casts = '';
					for(i=0;i<item.casts.length;i++){
						casts+=item.casts[i].name;
						if(i!=item.casts.length-1){
							casts+=' / ';
						}
					}
					newitem.push({
						id: item.id,
						title: item.title,
						genres: genres,
						cover: item.images.large,
						score: item.rating.average,
						directors: directors,
						casts: casts
					});
				})
				return newitem;
			}
			//滚动事件
			mui('.mui-scroll-wrapper').scroll({
				indicators:false 
			});
		</script>
	</body>

</html>